﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>text-based</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="text-based.css" rel="stylesheet" />
    <script src="text-based.js"></script>
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/dices.js"></script>
</head>
<body>
    <div class="text_based fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">d20 Dice Roller</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="leftContent">
                <div id="d4">
                    <div class="text">
                        <label>Roll me </label>
                    </div>
                    <div class="button">
                        <button id="delD4">-</button>
                    </div>
                    <div class="input">
                        <input type="text" id="noOfD4" size="5" maxlength="2" value="0" />
                    </div>
                    <div class="button">
                        <button id="addD4">+</button>
                    </div>
                    <div class="text">
                        d4 dice(s).
                    </div>
                    <div class="clear"></div>
                </div>
                <div id="d6">
                    <div class="text">
                        <label>Roll me </label>
                    </div>
                    <div class="button">
                        <button id="delD6">-</button>
                    </div>
                    <div class="input">
                        <input type="text" id="noOfD6" size="5" maxlength="2" value="0" />
                    </div>
                    <div class="button">
                        <button id="addD6">+</button>
                    </div>
                    <div class="text">
                        d6 dice(s).
                    </div>
                    <div class="clear"></div>
                </div>
                <div id="d8">
                    <div class="text">
                        <label>Roll me </label>
                    </div>
                    <div class="button">
                        <button id="delD8">-</button>
                    </div>
                    <div class="input">
                        <input type="text" id="noOfD8" size="5" maxlength="2" value="0" />
                    </div>
                    <div class="button">
                        <button id="addD8">+</button>
                    </div>
                    <div class="text">
                        d8 dice(s).
                    </div>
                    <div class="clear"></div>
                </div>
                <div id="d10">
                    <div class="text">
                        <label>Roll me </label>
                    </div>
                    <div class="button">
                        <button id="delD10">-</button>
                    </div>
                    <div class="input">
                        <input type="text" id="noOfD10" size="5" maxlength="2" value="0" />
                    </div>
                    <div class="button">
                        <button id="addD10">+</button>
                    </div>
                    <div class="text">
                        d10 dice(s).
                    </div>
                    <div class="clear"></div>
                </div>
                <div id="dPercent">
                    <div class="text">
                        <label>Roll me </label>
                    </div>
                    <div class="button">
                        <button id="delDPercent">-</button>
                    </div>
                    <div class="input">
                        <input type="text" id="noOfDPercent" size="5" maxlength="2" value="0" />
                    </div>
                    <div class="button">
                        <button id="addDPercent">+</button>
                    </div>
                    <div class="text">
                        dPercent dice(s).
                    </div>
                    <div class="clear"></div>
                </div>
                <div id="d12">
                    <div class="text">
                        <label>Roll me </label>
                    </div>
                    <div class="button">
                        <button id="delD12">-</button>
                    </div>
                    <div class="input">
                        <input type="text" id="noOfD12" size="5" maxlength="2" value="0" />
                    </div>
                    <div class="button">
                        <button id="addD12">+</button>
                    </div>
                    <div class="text">
                        d12 dice(s).
                    </div>
                    <div class="clear"></div>
                </div>
                <div id="d20">
                    <div class="text">
                        <label>Roll me </label>
                    </div>
                    <div class="button">
                        <button id="delD20">-</button>
                    </div>
                    <div class="input">
                        <input type="text" id="noOfD20" size="5" maxlength="2" value="0" />
                    </div>
                    <div class="button">
                        <button id="addD20">+</button>
                    </div>
                    <div class="text">
                        d20 dice(s).
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="button">
                    <button id="roll">Roll dices</button>
                </div>
                <div class="error">
                    <span id="error"></span>
                </div>
                <div class="clear"></div>
            </div>
            <div class="rightContent">
                <div id="dices"></div>
            </div>
        </section>
    </div>
</body>
</html>
